<div class="text-center separator bottom ui"> <div class="row"> <div class="col-md-6"> <div class="innerAll"> <h5 class="strong">Stroke buttons</h5> <button class="btn btn-primary btn-stroke">Primary</button> <button class="btn btn-inverse btn-stroke">Inverse</button> <button class="btn btn-danger btn-stroke">Danger</button> <button class="btn btn-success btn-stroke">Success</button> <button class="btn btn-warning btn-stroke"> Warning</button> <button class="btn btn-info btn-stroke">Info</button> </div> <div class="innerAll"> <h5 class="strong">Circle Buttons</h5> <button class="btn btn-circle btn-default"><i class="fa fa-home"></i></button> <button class="btn btn-circle btn-primary"><i class="fa fa-lock"></i></button> <button class="btn btn-circle btn-info"><i class="fa fa-google-plus"></i></button> <button class="btn btn-circle btn-inverse"><i class="fa fa-user"></i></button> <button class="btn btn-circle btn-danger"><i class="fa fa-trash-o"></i></button> <button class="btn btn-circle btn-warning"><i class="fa fa-linkedin"></i></button> <button class="btn btn-circle btn-success"><i class="fa fa-twitter"></i></button> </div> <div class="innerAll"> <h5 class="strong">Circle Stroke</h5> <button class="btn btn-stroke btn-circle btn-primary"><i class="fa fa-lock"></i></button> <button class="btn btn-stroke btn-circle btn-info"><i class="fa fa-google-plus"></i></button> <button class="btn btn-stroke btn-circle btn-inverse"><i class="fa fa-user"></i></button> <button class="btn btn-stroke btn-circle btn-danger"><i class="fa fa-trash-o"></i></button> <button class="btn btn-stroke btn-circle btn-warning"><i class="fa fa-linkedin"></i></button> <button class="btn btn-stroke btn-circle btn-success"><i class="fa fa-twitter"></i></button> </div> </div> <div class="col-md-6"> <div class="innerAll"> <h5 class="strong">Regular buttons</h5> <button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-inverse">Inverse</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> </div> <div class="innerAll"> <h5 class="strong">Buttons + Icons</h5> <button class="btn btn-default"><i class="fa fa-home"></i> Default</button> <button class="btn btn-primary"><i class="fa fa-lock"></i> Primary</button> <button class="btn btn-inverse"><i class="fa fa-user"></i> Inverse</button> <button class="btn btn-danger"><i class="fa fa-trash-o"></i> Danger</button> <button class="btn btn-success"><i class="fa fa-twitter"></i> Success</button> </div> </div> </div> <div class="separator"></div> <div class="innerAll"> <h5 class="strong">Buttons + Dropdowns</h5> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown Default <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown Primary <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> Dropdown Inverse <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropdown Danger <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown Success <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> Dropdown Warning <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="separator"></div> <div class="innerAll"> <h5 class="strong">Double buttons</h5> <button class="btn btn-default btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> <button class="btn btn-primary btn-icon-stacked"><i class="fa fa-2x fa-twitter"></i> <span>Join using your<br/>Twitter Account</span></button> <button class="btn btn-inverse btn-icon-stacked"><i class="fa fa-2x fa-google-plus"></i> <span>Join using your<br/>Google Account</span></button> <button class="btn btn-danger btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> <button class="btn btn-success btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> <button class="btn btn-warning btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> </div> <div class="separator"></div> <div class="innerAll"> <h5 class="strong">Double Stroke</h5> <button class="btn btn-stroke btn-primary btn-icon-stacked"><i class="fa fa-2x fa-twitter"></i> <span>Join using your<br/>Twitter Account</span></button> <button class="btn btn-stroke btn-inverse btn-icon-stacked"><i class="fa fa-2x fa-google-plus"></i> <span>Join using your<br/>Google Account</span></button> <button class="btn btn-stroke btn-danger btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> <button class="btn btn-stroke btn-success btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> <button class="btn btn-stroke btn-warning btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button> </div> <div class="separator"></div> </div> <div class="separator bottom"></div>
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "assets/components/core/less/widgets.less"; @import "http://localhost/shared/components/modules/admin/tables/responsive/assets/custom/less/tables-responsive.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.